<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  .outer1 {
    height: 100px;
  }
  .left1 {
    float: left;
    height: 100px;
    width: 200px;
    background-color: coral;
  }
  .right1 {
    height: 100px;
    margin-left: 200px;
    background-color: rebeccapurple;
  }


  .outer2 {
    height: 100px;
  }
  .left2 {
    float: left;
    height: 100px;
    width: 200px;
    background-color: coral;
  }
  .right2 {
    height: 100px;
    overflow: hidden;
    background-color: rebeccapurple;
  }


  .outer3 {
    display: flex;
    height: 100px;
  }
  .left3 {
    width: 200px;
    background-color: coral;
  }
  .right3 {
    flex: 1;
    background-color: rebeccapurple;
  }

  .outer4 {
    position: relative;
    height: 100px;
  }
  .left4 {
    position: absolute;
    height: 100px;
    width: 200px;
    background-color: coral;
  }
  .right4 {
    height: 100px;
    margin-left: 200px;
    background-color: rebeccapurple;
  }

  .outer5 {
    position: relative;
    height: 100px;
  }
  .left5 {
    height: 100px;
    width: 200px;
    background-color: coral;
  }
  .right5 {
    position: absolute;
    top: 0;
    left: 200px;
    right: 0;
    height: 100px;
    background-color: rebeccapurple;
  }
</style>
<body>
  <h3>两栏布局实现</h3>
  <h4>左浮动右外距</h4>
  <div class="outer1">
    <div class="left1"></div>
    <div class="right1"></div>
  </div>
  <h4>左浮动右BFC</h4>
  <div class="outer2">
    <div class="left2"></div>
    <div class="right2"></div>
  </div>
  <h4>左浮动右Flex</h4>
  <div class="outer3">
    <div class="left3"></div>
    <div class="right3"></div>
  </div>
  <h4>左定位右外距</h4>
  <div class="outer4">
    <div class="left4"></div>
    <div class="right4"></div>
  </div>
  <h4>右定位</h4>
  <p>absolute元素才能拥有流体特性呢？这个条件就是“对立方向同时发生定位”的时候。</p>
  <p>如果只有left属性没有right属性，absolute则表现为“包裹性”。在垂直方向上的表现同理</p>
  <div class="outer5">
    <div class="left5"></div>
    <div class="right5"></div>
  </div>
</body>
</html>